<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>食堂详情</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="css/comments.css" media="all">
    <style>
		input[disabled]{
			color:black;
			opacity:1
		}
		.layui-disabled{
			color: black!important;
		}
        .maincontainer .layui-form-label{
            width: 140px;
        }
        .maincontainer .layui-input-block{
            margin-left: 170px;
        }
    </style>
</head>
<body>
    <div class="maincontainer">
        <blockquote class="layui-elem-quote">
            食堂详情
            <button type="button" class="layui-btn layui-btn-sm" style="float: right;margin-top: -4px;" onclick="window.history.back();">返回</button>
        </blockquote>
        <form class="layui-form" action="" lay-filter="example">
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>账号：</label>
                <div class="layui-input-inline">
                  <input type="text" name="account" autocomplete="off" placeholder="请输入账号" class="layui-input" maxlength="20" disabled="true">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>密码：</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input" maxlength="20" disabled="true">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>确认密码：</label>
                <div class="layui-input-inline">
                    <input type="password" name="password1" placeholder="请输入确认密码" autocomplete="off" class="layui-input" maxlength="20" disabled="true">
                </div>
            </div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="redtext marginRight">*</span>食堂名称：</label>
			    <div class="layui-input-inline">
			      <input type="text" name="canteenName" autocomplete="off" placeholder="请输入食堂名称" class="layui-input" maxlength="50" disabled="true">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="redtext marginRight">*</span>食堂联系人：</label>
			    <div class="layui-input-inline">
			      <input type="text" name="contactPerson" autocomplete="off" placeholder="请输入食堂联系人" class="layui-input" maxlength="20" disabled="true">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="redtext marginRight">*</span>联系人电话：</label>
			    <div class="layui-input-inline">
			      <input type="text" name="contactTelephone" autocomplete="off" placeholder="请输入联系人电话" class="layui-input" maxlength="11" disabled="true">
			    </div>
			</div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>状态：</label>
                <div class="layui-input-block">
                    <input type="radio" name="openStatus" value="1" title="启用" checked="" disabled="true">
                    <input type="radio" name="openStatus" value="0" title="禁用" disabled="true">
                </div>
            </div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="redtext marginRight">*</span>服务区域：</label>
			    <div class="layui-input-inline">
			        <select name="f" lay-filter="f" disabled="true"></select>
			    </div>
			    <div class="layui-input-inline">
			        <select name="s" lay-filter="s" disabled="true"></select>
			    </div>
			    <div class="layui-input-inline">
			        <select name="t" lay-filter="t" disabled="true"></select>
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"></label>
			    <div class="layui-form-mid layui-word-aux remarks"></div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="redtext marginRight">*</span>收货地址：</label>
			    <div class="layui-input-inline" style="min-width: 50%;">
			      <textarea type="text" name="receiveAddress" autocomplete="off" placeholder="请输入收货地址" disabled="true" class="layui-textarea"></textarea>
			    </div>
			</div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>是否允许代下单：</label>
                <div class="layui-input-block">
                    <input type="radio" name="replaceOrderStatus" value="1" title="是" checked="" disabled="true">
                    <input type="radio" name="replaceOrderStatus" value="0" title="否" disabled="true">
                </div>
            </div>
            <div class="layui-form-item replaceOrderSupplier">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <table class="layui-hide" id="goodsTable" lay-filter="goodsTable"></table>
                </div>
            </div>
        </form>
    </div>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>

    layui.config({
        base: 'plugins/layui/modules/',
    }).use(['http', 'form'], function() {
        var http = layui.http,
            form = layui.form;
			
		var id = http.getPid('id')
		// 服务区域
		var areaList,fList,sList
		http.get('food/manager/region/listAllRegion',{},function(res){
		    if(res.code == 200){
		        areaList = res.data
		        var html = '<option value=""></option>';
				for (var i = 0; i < areaList.length; i++) {
					html += '<option value="' + areaList[i].id + '">' + areaList[i].regionName + '</option>'
				}
				$('select[name=f]').html(html);
				form.render('select');
		    }else{
		        layer.msg(res.msg)
		    }
		}) 
		//监听
		form.on('select(f)', function(data){
		    for (var i = 0; i < areaList.length; i++) {
		        if(areaList[i].id == data.value){
		            fList = areaList[i].children
		            var html = '<option value=""></option>';
		            if(fList){
		                for (var i = 0; i < fList.length; i++) {
		                    html += '<option value="' + fList[i].id + '">' + fList[i].regionName + '</option>'
		                }
		            }
		            $('select[name=s]').html(html);
		            form.render('select');
		            break
		        }
		    }
		})
		form.on('select(s)', function(data){
		    for (var i = 0; i < fList.length; i++) {
		        if(fList[i].id == data.value){
		            sList = fList[i].children
		            var html = '<option value=""></option>';
		            if(sList){
		                for (var i = 0; i < sList.length; i++) {
		                    html += '<option value="' + sList[i].id + '">' + sList[i].regionName + '</option>'
		                }
		            }
		            $('select[name=t]').html(html);
		            form.render('select');
		            break
		        }
		    }
		})
		// 供应商详情查询
		var replaceOrderSupplierIdSet = [],
		replaceOrderSupplierIdSetList = [];
		http.get('food/manager/canteen/findById',{
		    id: id
		},function(res){
		    if(res.code == 200){
		        form.val('example',{
		            account: res.data.account,
		            password: '1234',
		            password1: '1234',
		            canteenName: res.data.canteenName,
		            contactPerson: res.data.contactPerson,
		            contactTelephone: res.data.contactTelephone,
		            openStatus: res.data.openStatus,
					regionId: res.data.t, 
					receiveAddress: res.data.receiveAddress,
					replaceOrderStatus: res.data.replaceOrderStatus // 是否允许代下单
				})

				// 是否允许代下单
				if(res.data.replaceOrderStatus == 0){ // 否
					$('.replaceOrderSupplier').hide()
				}else if(res.data.replaceOrderStatus == 1){ // 是
					$('.replaceOrderSupplier').show()
				}
				if(res.data.regionIdSet[0]){
		        	areaReView(res.data.regionIdSet[0])
				}
		        var fileArr = res.data.qualificationFiles
		        if(fileArr){
		            fileArr = JSON.parse(fileArr)
		            qualificationFiles = fileArr[0].file
		            $('.fileUpLoadDiv').show()
		            $('.fileUpLoadName').html(fileArr[0].filename)
				}
				
				// 指定代下单供应商
				if(res.data.replaceOrderSupplierSet){
					replaceOrderSupplierIdSetList = res.data.replaceOrderSupplierSet
					for(var i=0;i<replaceOrderSupplierIdSetList.length;i++){
						replaceOrderSupplierIdSet.push(replaceOrderSupplierIdSetList[i].id)
					}
					goodsFun() // 回显已选择的供应商列表
				}
		    }else{
		        layer.msg(res.msg)
		    }
		})
		// 预览
		$(document).on('click','.fileUpLoadView',function(){
		    window.open(TUrl+qualificationFiles)
		})
		
		// 服务区域回显
		function areaReView(id){
		    http.get('food/manager/region/listRegionByRegionId',{
		        id: id
		    },function(res){
		        if(res.code == 200){
		            $('select[name=f]').val(res.data[0].id)
		            for (var i = 0; i < areaList.length; i++) {
		                if(areaList[i].id == res.data[0].id){
		                    fList = areaList[i].children
		                    var html = '<option value=""></option>';
		                    if(fList){
		                        for (var j = 0; j < fList.length; j++) {
		                            html += '<option value="' + fList[j].id + '">' + fList[j].regionName + '</option>'
		                            if(fList[j].id == res.data[0].children[0].id){
		                                sList = fList[j].children
		                                var html1 = '<option value=""></option>';
		                                if(sList){
		                                    for (var k = 0; k < sList.length; k++) {
		                                        html1 += '<option value="' + sList[k].id + '">' + sList[k].regionName + '</option>'
		                                    }
		                                }
		                                $('select[name=t]').html(html1);
		                                $('select[name=t]').val(res.data[0].children[0].children[0].id)
		                                $('.remarks').html('注：该区域包括（'+res.data[0].children[0].children[0].remarks+'）')
		                                form.render('select');
		                            }
		                        }
		                    }
		                    $('select[name=s]').html(html);
		                    $('select[name=s]').val(res.data[0].children[0].id)
		                    form.render('select');
		                    break
		                }
		            }
		        }else{
		            layer.msg(res.msg)
		        }
		    })
		}

        // 回显已选择的供应商列表
        function goodsFun() {
            http.table1({
                elem: '#goodsTable',
                id: 'goodsTable',
                cols: [[
                    {title:'序号',type:'numbers'},
                    {field:'supplierName', title: '供应商名称', align : 'center'},
                    {field:'account', title: '账号', align : 'center'}
                ]],
                limit: replaceOrderSupplierIdSetList.length,
                data: replaceOrderSupplierIdSetList
            })
		}
    })
</script>
</body>